<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        input[type='text'] {
            height: 30px;
            font-size: 20px;
            padding: 0 5px;
        }

        .check {
            overflow: hidden;
        }

        .check-item {
            float: left;
        }
    </style>
</head>
<body>
<input type="text">
<button>确定</button>

<div class="check">
    <div class="check-item">
        <input type="checkbox" name="one" id="one0">
        <label for="one0">全选</label>
    </div>

    <div class="check-item">
        <input type="checkbox" name="one" id="one1">
        <label for="one1">全选</label>
    </div>


    <div class="check-item">
        <input type="checkbox" name="one" id="one2">
        <label for="one2">全选</label>
    </div>
</div>
</body>
</html>

<script src="../../libs/jquery3_1_1.min.js"></script>
<script>
    $(function () {
        var json = [{"id": 288, "maxVal": 7000, "minValue": 0, "show": false, "stepType": 1000}, {
            "id": 289,
            "maxVal": 9000,
            "minValue": 7000,
            "show": false,
            "stepType": 1000
        }, {"id": 290, "maxVal": 10000, "minValue": 9000, "show": true, "stepType": 1000}, {
            "id": 291,
            "maxVal": 15000,
            "minValue": 10000,
            "show": false,
            "stepType": 1000
        }, {"id": 292, "maxVal": -1, "minValue": 15000, "show": true, "stepType": 1000}];

        // 生成符合1000的array
        var showJson = [];
        var showStr = '';
        for (var i = 0; i < json.length; i++) {
            if (json[i].stepType == 1000) {
                showJson.push(json[i]);
                if (json[i].maxVal == -1) {

                } else {
                    showStr += json[i].maxVal + ',';
                }
            }
        }
        // 处理最后一个逗号
        showStr = showStr.substring(0, showStr.length - 1);
        $("input[type='text']").val(showStr);
        createCheckBox(showStr, showJson);
        $('button').click(function () {
            //获取value
            createCheckBox($("input[type='text']").val());
        });
        //生成checkbox的方法
        function createCheckBox(str, array) {
            var strArray = str.split(',');
//            strArray.unshift('0');
            strArray.unshift('全选');
            strArray.push('以上');
            console.log(strArray);
            var html = '';
            for (var i = 0; i < strArray.length; i++) {
                if (i == 0){
                    html+='<div class="check-item"> <input type="checkbox" name="one" id="check'+i+'"> <label for="check'+i+'">全选</label> </div>';
                }else if (i == strArray.length-1){
                    html+='<div class="check-item"> <input type="checkbox"  name="one" id="check'+i+'"> <label for="check'+i+'">'+strArray[strArray.length-2]+'以上</label> </div>';
                }else if (i == 1){
                    html+='<div class="check-item"> <input type="checkbox" name="one" id="check'+i+'"> <label for="check'+i+'">'+strArray[i]+'以下</label> </div>';
                }
                else {
                    html+='<div class="check-item"> <input type="checkbox" name="one" id="check'+i+'"> <label for="check'+i+'">'+strArray[i-1]+'~'+strArray[i]+'</label> </div>';
                }
            }
            $('.check').html(html);
            //设置是否被选中
            if (array) {
                $('.check input:gt(0)').each(function (index, obj) {
                    $(this).attr('checked',array[index].show);
                });
            }
        }

    });
</script>